<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #circle,
        #circle2 {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 20vh auto;
            background-color: cadetblue;
            overflow: hidden;
            border-radius: 50%;
            box-shadow: 0 0 20px 6px rgb(0 0 0 / 45%);
        }

        #circle>img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="circle">
        <img src="/img/1.jpg" alt="">
    </div>
    <script>
        var CircleButton = (function () {
            let _el = null;
            let circle_data = null;
            let data = {
                x: 0,
                y: 0,
                r: 0
            }
            function get_cir_point(el, x, y) {
                if (!el) { return }
                const attrs = get_attr(el, ["width", "height", "x", "y", "left", "top"]);
                let w = attrs['width'] / 2 + attrs['left'];
                let h = attrs['height'] / 2 + attrs['top'];
                return {
                    x: w,
                    y: h
                }
            }
            /**
             * props [] 数组
             * */
            function get_attr(el, props) {
                const res = {};
                let t = el.getBoundingClientRect();
                props.forEach(els => {
                    res[els] = t[els];
                });
                return res;
            }

            let startx = 0, starty = 0;
            let endx = 0, endy = 0;
            let movex = 0, movey = 0;
            function start(e) {
                e.preventDefault();
                _el.addEventListener("mousemove", drag);
                _el.addEventListener("mouseup", end);
                let x = e.clientX, y = e.clientY;
                startx = x; starty = y;
            }

            function drag(e) {
                e.preventDefault();
                movex = (e.clientX) - startx + endx; movey = (e.clientY) - starty + endy;
                data.r = Math.atan2((e.clientY - circle_data.y), (e.clientX - circle_data.x)) * 180 * Math.PI;
                _el.style.transform = `rotate(${data.r}deg)`;
            }

            function end(e) {
                e.preventDefault();
                let x = e.clientX, y = e.clientY;
                endx = movex;
                endy = movey;
                _el.removeEventListener("mousemove", drag);
            }
            function autoplay() {
                let angle = 0;
                function _p() {
                    angle -= 1;
                    _el.style.transform = `rotate(${angle}deg)`;
                    if (angle < -360) {
                        angle = 0;
                    }
                    requestAnimationFrame(_p);
                }
                setTimeout(() => _p(), 1000);
            }

            return {
                mount(el) {
                    if (!el) {
                        return
                    }
                    if (typeof el === 'string') {
                        _el = document.querySelector(el);
                    }
                    else if (el instanceof Object) {
                        _el = el
                    } else {
                        return;
                    }
                    this.on(1)
                    circle_data = get_cir_point(_el);
                    _el.addEventListener("mousedown", start);
                    // autoplay();
                    return this;
                },
                on(a) {
                    if (typeof a === "function") {
                        let _r;
                        Object.defineProperty(data, "r", {
                            set(val) {
                                let per = val / 360;
                                _r = val;
                                a({
                                    percent: per,
                                    angle: val
                                });
                            },
                            get(a) {
                                return _r
                            }
                        })
                        a();
                    }
                    return this;
                }
            }
        })();
        var a = CircleButton.on((data) => {
            console.log(data);
        }).mount("#circle");
    </script>
</body>

</html>